<template>
	<view class="pages">
		<view class="danadd">
			<view class="dant">
				<view class="name_w">
					<text class="names">名称</text>
					<text class="hongxing">*</text>
				</view>
				<input class="names_t" type="text" placeholder="输入名称" v-model="u.name"/>
			</view>
		</view>
		
		<view style="height: 10rpx;"></view>


		<view class="danadd" style="border-bottom: 1px #eaeaea solid;"  @click="s_img">
			<view class="right">
				<view class="dan">
					<view class="dant">
						<view class="name_w">
							<text class="names">LOGO：</text>
							<text class="hongxing">*</text>
						</view>
						
					</view>
				</view>
			</view>
			<image v-if="u.image && u.image != ''" class="danimg" :src="getimg(u.image)" mode="aspectFill"></image>
			<image v-else class="danimg" src="@/static/image/common/errorImage.jpg" mode="aspectFill"></image>
		</view>
		
		<!--定位-->
		<view class="local fr">
			<view class="fr">
				<uni-icons type="location" size="20" color="#ccc"></uni-icons>
				<view class="localw">
					<text class="localt">{{adr.province+','+adr.city+','+adr.district+','+adr.township}}</text>
				</view>
				
			</view>
			
			<text class="chong" @click="getlocation">重新定位</text>
		</view>
		
		<view class="danadd" style="border-bottom: 1px #eaeaea solid;">
			<view class="dant">
				<view class="name_w">
					<text class="names">电话号：</text>
					<text class="hongxing">*</text>
				</view>
				<input class="names_t" type="text" placeholder="请输入电话号码" v-model="u.mobile"/>
			</view>
		</view>
		
		
		<view class="danadd" style="border-bottom: 1px #eaeaea solid;">
			<view class="dant">
				<view class="name_w">
					<text class="names">详细地址</text>
					<text class="hongxing">*</text>
				</view>
				<input class="names_t" placeholder="请输入详细地址" type="text" v-model="u.adrinfo"/>
			</view>
		</view>
		
		<view class="danadd" style="border-bottom: 1px #eaeaea solid;">
			<view class="dant">
				<view class="name_w">
					<text class="names">经度：</text>
					<text class="hongxing">*</text>
				</view>
				<input class="names_t" type="text" placeholder="经度" v-model="u.lon"/>
			</view>
		</view>
		
		
		<view class="danadd" style="border-bottom: 1px #eaeaea solid;">
			<view class="dant">
				<view class="name_w">
					<text class="names">纬度：</text>
					<text class="hongxing">*</text>
				</view>
				<input class="names_t" type="text" placeholder="纬度" v-model="u.lat"/>
			</view>
		</view>
		
		
		<view style="height: 10rpx;"></view>
		<!--类目-->
		<view class="danadd">
			<view class="dant">
				<view class="name_w">
					<text class="names">门店类目</text>
				</view>
			</view>
		</view>
		<view class="xuanfu">
		<scroll-view class="scrollcon" :scroll-x="true" show-scrollbar="false">
			<view class="dan_list_w">
			<view class="dan_list" v-for="(d,i) in leilist"  @click="navIndex = i">
			<image style="width: 50rpx;height: 50rpx;" :src="getimg(d.image)"></image>
			<text :class="'dan_list_t '+(navIndex == i?'dan_list_t_':'')">{{d.name}}</text>
			
			</view>	
			</view>
		</scroll-view>
		</view>
		
		
		
		
		<view class="danadd">
			<view class="dant">
				<view class="name_w">
					<text class="names">公司简介</text>
				</view>
			</view>
			
		</view>
		<view class="zj">
			<textarea class="zjn" placeholder="请输入介绍详情" maxlength="-1" v-model="u.info"></textarea>
		</view>
		
		<view style="height: 10rpx;"></view>
		<view class="danadd">
			<view class="dant">
				<view class="name_w">
					<text class="names">相关资质</text>
				</view>
			</view>
			
		</view>
				
		<view style="padding: 10rpx;background: #ffffff;">
			<imagelist v-on:delimg="delimg" v-on:upimg="upimg('xiangxi')" :imagedata="imagedata_xx" local="xiangxi" ></imagelist>
		</view>
		
		<view style="height: 150rpx;"></view>
		
		
		<view class="save btn" @click.stop="save">
			<text class="save_n">保存</text>
		</view>
		
		
		
		<!--citypicker-->
		<citypicker 
		:show_picker="show_picker" 
		v-on:onConfirm="seleced"  
		v-on:onCancel="show_picker = false"> 
		</citypicker>
		
		<!--citypicker-->
		<citypicker 
		:show_picker="show_pickers" 
		v-on:onConfirm="seleceds"  
		v-on:onCancel="show_pickers = false"> 
		</citypicker>
		
		
	</view>
</template>

<script>
	import citypicker from '../static/citypicker/mpvueCityPicker.vue'
	import $util from "@/util/util.js"
	import $upimage from "@/util/upimage.js" 
	import imagelist from "../static/imagelist/imagelist.nvue"
	import {getlocation} from '@/util/tool'
	export default {
		data() {
			return {
				h:uni.getSystemInfoSync().windowHeight,
				u:{},
				show_picker:false,
				show_pickers:false,//墓碑地址
				linshi:{},//临时的数据，用来做传值用
				editer:true,//是否可编辑
				id:-1,
				imagedata_xx:[],
				type:'hhr',
				adr:{province:'正在定位...',city:'',district:'',township:'',lon:'',lat:''},//省市区-街道
				
				navIndex:0,
				leilist:[],
			}
		},
		components: {
		citypicker,
		imagelist
		},
		onLoad(e) {
			
			if(e.type){
				this.type = e.type
			}
			this.h = uni.getSystemInfoSync().windowHeight
			//查看资料的
				this.ajaxinfo();
				
		},
		methods: {
			openzcdetail(){
				let id = this.u.id;
				$util.openwin('/pages/index/zongcidetail?id='+id)
			},
			save(){
				if(!this.u.name || !this.u.image  || !this.u.mobile || this.u.mobile == '' || !this.u.adrinfo || this.u.adrinfo == ''){
					$util.toast('带心号的不能为空')
					return
				}
				if(this.adr.lon == ''){
					$util.toast('定位失败，请重新定位')
					return
				}
				this.u.url = 'Mendian/saveMendian';
				this.u.method = 'post';
				this.u.id = this.id;
				this.u.zizhiimages = this.imagedata_xx.join(',');
				this.u.adr = JSON.stringify(this.adr)
				this.u.lei_id = this.leilist[this.navIndex].id
				$util.showProgress()
				console.log(JSON.stringify(this.u))
				$util.ajax(this.u,(r,e)=>{
					$util.hideProgress()
					if(r.code == 1){
						$util.alert(r.msg,()=>{
							uni.navigateBack()
						})
					}else{
						$util.toast(r.msg)
					}
				})
				return
				
				
			},
			getlocation(){
				let _ = this
				$util.showProgress()
				setTimeout(()=>{
					$util.hideProgress()
				},3000)
				getlocation((d)=>{
					if(d.code == 1){
						$util.hideProgress()
						_.adr = d.prame;
						console.log(JSON.stringify(d.prame))
						_.u.lon = d.prame.lon
						_.u.lat = d.prame.lat
						return
					}
					_.adr = {province:'定位失败',city:'',district:'',township:''};
				})
			},
			ajaxinfo(){
				$util.showProgress()
				let _ = this
				$util.ajax({
					url:'Mendian/getMendian',
					type:_.type
				},(r,e)=>{
					$util.hideProgress()
					_.leilist = r.leilist;
					if(r.code == 1){
						_.u = r.data
						_.imagedata_xx = r.data.images;
						if(!r.data.adr || !r.data.adr.lon){
							_.getlocation();
						}else{
							_.adr = r.data.adr;
						}
						
						for (var i = 0; i < _.leilist.length; i++) {
							if(_.leilist[i].id == r.data.lei_id)
							_.navIndex = i
						}
					}else{
						_.getlocation();
					}
				})
			},
			getimg(path){
				return $util.get_img(path)
			},
			jian(t = 1){
				if(!this.editer){
					return
				}
				if(t == 1){
					this.u.open = 1;
				}else{
					this.u.open = -1;
				}
			},
			//地区选择
			seleced(e){
				if(!this.editer){
					return
				}
			console.log(JSON.stringify(e));
			this.u.adr = e.label[0]+'-'+e.label[1]+'-'+e.label[2]
			this.show_picker = false
			},
			seleceds(e){
			if(!this.editer){
					return
				}
			console.log(JSON.stringify(e));
			this.u.adrmb = e.label[0]+'-'+e.label[1]+'-'+e.label[2]
			this.show_picker = false	
			},
			s_img(){
			let that = this;
			$upimage.up({type:1,sizeType:['compressed']}, 1, (res,err)=>{
			$upimage.compressImage_1({path:res.tempFilePaths[0],width:800},(path)=>{ 
			$upimage.upfield({
			path:path,
			field:'shequhhr',
			type:'shequhhr',
			},(res1,err)=>{
			console.log('ddd'+JSON.stringify(res1.data))
			let dd = JSON.parse(res1.data)
			that.u.image = dd.data;
			})
				
			})
			
			})
			},
			delimg(e) {
				if(e.l == 'xiangxi'){
					this.imagedata_xx.splice(e.i, 1);
				}else{
					this.imagedata.splice(e.i, 1);
				}
			},
			upimg(name = 'xiangxi'){
				let max = 9
				$upimage.up({
					type: this.posttype
				}, max, (res, err) => {
					if (res) {
						console.log(JSON.stringify(res))
						if (res.tempFilePaths.length + this.imagedata_xx.length > max) {
							$util.toast('超出最大数量限制')
							return
						}
							for (var i = 0; i < res.tempFilePaths.length; i++) {
								$upimage.compressImage_1({path:res.tempFilePaths[i],width:800},(path_)=>{
								$upimage.upfield({
								path:path_,
								field:'shequhhr',
								type:'shequhhr',
								},(res1,err)=>{
								console.log('ddd'+JSON.stringify(res1.data))
								let pathdata = JSON.parse(res1.data)
								this.imagedata_xx = this.imagedata_xx.concat(pathdata.data)
								})
								})
							}
					}
				})
			}
		}
	}
</script>

<style scoped>
.danadd{
	background: #ffffff;
	padding:8rpx 20rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.dant{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.name_w{
	height: 80rpx;
	display: flex;
	width: 180rpx;
	align-items: center;
}
.hongxing{
	font-size: 33rpx;
	color: red;
}
.names{
	font-size: 30rpx;
	color: #383838;
}
.names_t{
	height: 70rpx;
	border-radius: 20rpx;
	padding: 0 20rpx;
	width: 500rpx;
}
.danimg{
	width: 100rpx;
	height: 100rpx;
	border-radius: 150rpx;
}
.right{
	
}
.tsdan{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20rpx;
	border-right: 1px #ccc solid;
}
.ts_w{
	width: 100rpx;
	text-align: center;    
}
.ts_i{
	width: 245rpx;
	height: 70rpx;
}
.right_d{
	display: flex;
	flex-direction: row;
}
.btnd{
	background-color: #ccc;
	padding: 12rpx 30rpx;
	border-radius: 20rpx;
	margin-left: 20rpx;
	color: #ffffff;
}
.btnds{
	background-color: #35cc41;
}
.icon{
	width: 40rpx;
	height: 40rpx;
}
.zj{
	background: #ffffff;
	padding: 20rpx;
}
.zjn{
	background: #f5f5f5;
	width: 670rpx;
	padding:20rpx;
	border-radius: 20rpx;
	height: 400rpx;
}
.save{
	display: flex;
	position: fixed;
	left: 20rpx;
	bottom: 20rpx;
	width: 710rpx;
	height: 80rpx;
	align-items: center;
	justify-content: center;
	background: red;
	border-radius: 20rpx;
	z-index: 10000;
}
.save_n{
	font-size: 32rpx;
	color: #ffffff;
}
.join{
	position: fixed;
	right: 20rpx;
	bottom: 300rpx;
}
.joint{
	background: #a44d00;
	color: #ffffff;
	padding: 10rpx 15rpx;
	border-radius: 20rpx;
}
.info{
	font-size: 26rpx;
	color: #a8a8a8;
}
	.local{
		justify-content: space-between;
		background: #ffffff;
		padding: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}	
	.localw{
		width: 500rpx;
	}
	.localt{
		font-size: 28rpx;
		color: #767676;
	}
	.chong{
		font-size: 28rpx;
		color: #70d4eb;
	}
	
	
	
	.xuanfu{
		width: 750rpx;
		background-color: #ffffff;
		z-index: 100;
	}
	.scrollcon {
		    background: #ffffff;
			flex-direction: row;
			/* #ifndef APP-NVUE */
			white-space: nowrap;
			/* #endif */
	}
	.dan_list_w{
	display: flex;
	flex-direction: row;
	border-bottom: 1px #efefef solid;	
	padding-top: 20rpx;
	}
	.dan_list {
		display: flex;
		flex-direction: column;
		width:150rpx;
		position: relative;
		border-radius: 10rpx;
		align-items: center;
	}
	.msg{
	    position: absolute;
	    top: 0;
	    right: 0;
	    background: red;
	    color: #ffffff;
	    border-radius: 20px;
	    font-size: 12px;	
	}
	.dan_list_t{
		display: flex;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: normal;
		text-align: center;
		color: #383838;
	}
	.dan_list_t_{
		font-weight: bold;
		color: #ff1313;
	}
	
</style>
